/**
 * Created by Ysssssss on 2021/4/22.
 */
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types';
import { Button } from "antd";
import {OrderStatusSteps} from "@common/presentational/CustomizeSteps";
import {SHOPPING_MALL_ORDER_STATUS_CODE} from "@constants/ShoppingMallOrderStatus";
import CustomizeTableProvide from "@common/presentational/CustomizeTable";
import ShoppingMallRefundReasonModal from "@components/shoppingMall/modal/ShoppingMallRefundReasonModal";
import CountdownByTargetTime from "@common/presentational/CountdownByTargetTime";
import {withRouter} from "react-router-dom";

let statusStepTemplate1 = (current, orderDetail) => ({
    current,
    stepList: [
        {
            statusStr:"客户下单",
            ...(current > 1 ? {
                time: orderDetail.submit_time,
            } : {})
        }, {
            statusStr:"客户付款",
            ...(current > 2 ? {
                time: orderDetail.pay_time,
            } : {})
        }, {
            statusStr:"仓库发货",
            ...(current > 3 ? {
                time: orderDetail.deliver_memo.deliver_time
            } : {})
        }, {
            statusStr:"交易完成",
            ...(current > 4 ? {
                time: orderDetail.complete_time
            } : {})
        }
    ]
})

let statusStepTemplate2 = (current, orderDetail) => ({
    current,
    stepList: [
        {
            statusStr:"客户下单",
            ...(current > 1 ? {
                time: orderDetail.submit_time,
            } : {})
        }, {
            statusStr:"交易关闭",
            ...(current > 2 ? {
                time: orderDetail.complete_time,
            } : {})
        }
    ]
})

let statusStepTemplate3 = (current, orderDetail) => ({
    current,
    stepList: [
        {
            statusStr:"客户下单",
            ...(current > 1 ? {
                time: orderDetail.submit_time,
            } : {})
        }, {
            statusStr:"客户付款",
            ...(current > 2 ? {
                time: orderDetail.pay_time,
            } : {})
        }, {
            statusStr:"交易关闭",
            ...(current > 3 ? {
                time: orderDetail.complete_time,
            } : {})
        }
    ]
})

@withRouter
class ShoppingMallOrderDetailStatus extends PureComponent {
    static propTypes = {
        orderDetail: PropTypes.object,
    }
    constructor(props) {
        super(props);

        this.shoppingMallRefundReasonModal = React.createRef()
    }

    statusRender () {
        const { orderDetail } = this.props
        if (orderDetail.deliver_type === 0) return this.selfTakeStatusRender(orderDetail)
        return this.deliverStatusRender(orderDetail)
    }

    cancelOrder (orderNumber) {
        this.shoppingMallRefundReasonModal.current?.show({ orderNumber })
    }

    goWarehouse () {
        const { orderDetail, history } = this.props
        const { warehouse_id, process_order_number } = orderDetail
        history.push({
            pathname: `/warehouse/order/${warehouse_id}/${process_order_number}/detail`,
            query: history.location.pathname
        })
    }

    deliverStatusRender (orderDetail) {
        let statusStr = ''
        let statusInfo = null
        let steps = null
        switch(orderDetail.status) {
            case SHOPPING_MALL_ORDER_STATUS_CODE.await_pay:
                statusStr = '待客户付款'
                statusInfo = null
                steps = statusStepTemplate1(2, orderDetail)
                break;
            case SHOPPING_MALL_ORDER_STATUS_CODE.prepare_products:
                statusStr = '待仓库发货'
                statusInfo = (
                    <div className="mgt-48">
                        <Button type="primary" className="button-small mgr-12" onClick={this.goWarehouse.bind(this)}>发货</Button>
                        <Button type="primary"
                                ghost
                                className="button-small"
                                onClick={this.cancelOrder.bind(this, orderDetail.order_number)}
                        >取消订单</Button>
                    </div>
                )
                steps = statusStepTemplate1(3, orderDetail)
                break;
            case SHOPPING_MALL_ORDER_STATUS_CODE.await_receipt:
                statusStr = '待用户签收'
                statusInfo = (
                    <div className="mgt-16">
                        { orderDetail.refund_flag ? (
                            <div className="ft-12 clr-green mgb-8">退款中</div>
                        ) : null }
                        <div className="ft-12 ft-clr-md mgb-8">
                            <span>如客户未在</span>
                            <CountdownByTargetTime targetTime={orderDetail.auto_confirm_time}/>
                            <span>内未确认收货，系统将自动完成交易</span>
                        </div>
                        <div className="ft-12 ft-clr-md">物流信息：{ orderDetail.deliver_memo.platform }，{ orderDetail.deliver_memo.platform_order_num }</div>
                    </div>
                )
                steps = statusStepTemplate1(4, orderDetail)
                break;
            case SHOPPING_MALL_ORDER_STATUS_CODE.finished:
                statusStr = '已完成'
                statusInfo = (
                    <div className="mgt-16">
                        <div className="ft-12 ft-clr-md">物流信息：{ orderDetail.deliver_memo.platform }，{ orderDetail.deliver_memo.platform_order_num }</div>
                    </div>
                )
                steps = statusStepTemplate1(5, orderDetail)
                break;
            case SHOPPING_MALL_ORDER_STATUS_CODE.closed:
                statusStr = '已关闭'
                // todo 退款详情
                if (orderDetail.pay_order_number) {
                    statusInfo = (
                        <div className="mgt-16">
                            <div className="ft-12 clr-green mgb-8">退款详情</div>
                            { orderDetail.deliver_memo?.platform ? (
                                <div className="ft-12 ft-clr-md">物流信息：{ orderDetail.deliver_memo.platform }，{ orderDetail.deliver_memo.platform_order_num }</div>
                            ) : null  }
                        </div>
                    )
                    steps = orderDetail.deliver_memo?.platform ? statusStepTemplate1(5, orderDetail) : statusStepTemplate3(4, orderDetail)
                } else {
                    statusInfo = (
                        <div className="mgt-16">
                            <div className="ft-12 ft-clr-md">客户未付款，过时关闭</div>
                        </div>
                    )
                    steps = statusStepTemplate2(3, orderDetail)
                }
                break;
            default:
                break
        }
        return {
            statusStr,
            statusInfo,
            steps
        }
    }

    selfTakeStatusRender (orderDetail) {
        let statusStr = ''
        let statusInfo = null
        let steps = {}
        switch(orderDetail.status) {
            case SHOPPING_MALL_ORDER_STATUS_CODE.await_pay:
                statusStr = '待客户付款'
                statusInfo = (
                    <div className="mgt-48">
                        <Button type="primary"
                                ghost
                                className="button-small"
                                onClick={this.cancelOrder.bind(this, orderDetail.order_number)}
                        >取消订单</Button>
                    </div>
                )
                steps = statusStepTemplate1(2, orderDetail)
                break;
            case SHOPPING_MALL_ORDER_STATUS_CODE.prepare_products:
                statusStr = '待仓库备货'
                statusInfo = (
                    <div className="mgt-48">
                        <Button type="primary"
                                className="button-small mgr-12"
                                onClick={this.goWarehouse.bind(this)}
                        >备货</Button>
                        <Button type="primary"
                                ghost
                                className="button-small"
                                onClick={this.cancelOrder.bind(this, orderDetail.order_number)}
                        >取消订单</Button>
                    </div>
                )
                steps = statusStepTemplate1(3, orderDetail)
                break;
            case SHOPPING_MALL_ORDER_STATUS_CODE.await_receipt:
                statusStr = '待客户自提'
                statusInfo = (
                    <div className="mgt-16">
                        <div className="ft-12 ft-clr-md">取货码：{ orderDetail.deliver_memo.extract_key }</div>
                        { orderDetail.refund_flag ? (
                            <div className="ft-12 clr-green mgt-8">退款中</div>
                        ) : null }
                    </div>
                )
                steps = statusStepTemplate1(3, orderDetail)
                break;
            case SHOPPING_MALL_ORDER_STATUS_CODE.finished:
                statusStr = '已完成'
                statusInfo = (
                    <div className="mgt-16">
                        <div className="ft-12 ft-clr-md">取货码：{ orderDetail.deliver_memo.extract_key }</div>
                    </div>
                )
                steps = statusStepTemplate1(5, orderDetail)
                break;
            case SHOPPING_MALL_ORDER_STATUS_CODE.closed:
                statusStr = '已关闭'
                // todo 退款详情
                if (orderDetail.pay_order_number) {
                    statusInfo = (
                        <div className="mgt-16">
                            <div className="ft-12 clr-green mgb-8">退款详情</div>
                            { orderDetail.deliver_memo?.extract_key ? (
                                <div className="ft-12 ft-clr-md">取货码：{ orderDetail.deliver_memo.extract_key }</div>
                            ) : null  }
                        </div>
                    )
                    steps = orderDetail.deliver_memo?.platform ? statusStepTemplate1(5, orderDetail) : statusStepTemplate3(4, orderDetail)
                } else {
                    statusInfo = (
                        <div className="mgt-16">
                            <div className="ft-12 ft-clr-md">客户未付款，过时关闭</div>
                        </div>
                    )
                    steps = statusStepTemplate2(3, orderDetail)
                }
                break;
            default:
                break
        }
        return {
            statusStr,
            statusInfo,
            steps
        }
    }

    render () {
        const { statusStr, statusInfo, steps } = this.statusRender()
        return (
            <div className="detail-box flex-row-between">
                <div className="max-w-quarter-2">
                    <div className="ft-20 ft-clr-d">{ statusStr }</div>
                    { statusInfo }
                </div>
                <OrderStatusSteps
                    {...steps}
                />
                <ShoppingMallRefundReasonModal
                    ref={this.shoppingMallRefundReasonModal}
                    callback={this.props.getOrderDetail}
                />
            </div>
        )
    }
}

export default ShoppingMallOrderDetailStatus